<template>
	<view class="content">
		<view class="header">
			<!--搜索-->
			<view class="tap">
				<view class="search-bar"></view>
			</view>
			<!-- 导航栏点击 -->
			<view class="bar">
				<view @click="changeState(0)" :class="[state == 0 ? 'active' : '']">首页</view>
				<view @click="changeState(1)" :class="[state == 1 ? 'active' : '']">美食</view>
				<view @click="changeState(2)" :class="[state == 2 ? 'active' : '']">住宿</view>
				<view @click="changeState(3)" :class="[state == 3 ? 'active' : '']">本地特色</view>
			</view>
		</view>
		<!--开始呈现-->
		<view class="center">
			<view class="content-demo" v-for="(item, index) in list" :key="index">
				<!-- 全部 -->

				<view class="dome-box" v-if="state == 0">
					<view @click="go(item.id)">
						<view class="demo-img">
							<image :src="item.storePhoto"></image>
						</view>
						<view class="demo-title">{{ item.storeName }}</view>
						<view class="demo-shop">
							<view class="shop-sname">{{ item.storeAddress | ellipsis2 }}</view>
							<view class="location">
								<uni-icons type="location" size="20" color=""></uni-icons>
								<view>{{ item.distance }}km</view>
							</view>
						</view>
					</view>
				</view>

				<!--其他-->
				<view v-for="v in navigationBar" :key="v.id">
					<view class="dome-box" v-if="(state == v) & (item.storeCategory == v)">
						<view @click="go(item.id)">
							<view class="demo-img">
								<image :src="item.storePhoto"></image>
							</view>
							<view class="demo-title">{{ item.storeName }}</view>
							<view class="demo-shop">
								<view class="shop-sname">{{ item.storeAddress | ellipsis2 }}</view>
								<view class="location">
									<uni-icons type="location" size="20" color=""></uni-icons>
									<view>{{ item.distance }}km</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import http from '@/util/http.js';
export default {
	data() {
		return {
			storeCategory: 1,
			state: 0,
			searchState: 0,
			searchName: '',
			navigationBar: [1, 2, 3],
			distance: [],
			distances: [],
			searchList: [],
			list: [],
			UserLocation: {
				latitude: 30.779795,
				longitude: 103.85457
			}
		};
	},
	onLoad() {
		this.getStore();
	},
	// 触底触发
	onReachBottom() {
		console.log('暂无数据');
	},
	onShow() {
		console.log('onShow');
		let that = this;
		uni.getStorage({
			key: 'userLocation',
			success: function (res) {
				// console.log(res.data[0])
				// console.log(res.data[0].latitude)
				that.UserLocation.latitude = res.data[0].latitude;
				that.UserLocation.longitude = res.data[0].longitude;
				// console.log(that.UserLocation);
				that.getStore();
			}
		});
	},
	methods: {
		// 获取store中的部分数据
		getStore() {
			// console.log(this.UserLocation);
			http({
				url: '/store/getStore',
				method: 'get',
				params: {
					longitude: this.UserLocation.longitude,
					latitude: this.UserLocation.latitude
				},
				success: (res) => {
					if (res.data) {
						//将数据赋值给list数组
						this.list = res.data.data;
					}
				}
			});
		},
		// 导航栏点击
		changeState(state) {
			this.state = state;
		},
		// 跳转到shop/store页面
		go(id) {
			uni.navigateTo({
				url: '/pages/shop/store?id=' + id
			});
			console.log(id);
		}
	},
	// 超出字数限制 则加省略号
	filters: {
		ellipsis(value) {
			if (!value) return '';
			if (value.length > 8) {
				return value.slice(0, 8) + '...';
			}
		}
	}
};
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
	background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.content {
	width: 100%;
	background-color: #ccc;
}
.header {
	width: 100%;
	position: fixed;
	top: 0;
	background-color: #ffffff;
	z-index: 10;
}
.tap {
	margin-top: 20rpx;
	margin-left: 40rpx;
	margin-right: 240rpx;
	padding-top: 20px;
}
.search-bar {
	// border: 1px solid gainsboro;
	border-radius: 50px;
	height: 60rpx;
	display: flex;
	background-color: #ffffff;
}
.search-span {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
	margin-top: 10rpx;
	padding-left: 10rpx;
	// padding-left: 10rpx;
}
.search-text {
	height: 60rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	font-size: 30rpx;
	color: #7f7f81;
}
.bar {
	margin-left: 5px;
	margin-right: 5px;
	display: flex;
	justify-content: space-between;
}
.bar view {
	font-size: 14px;
	margin-top: 20rpx;
	height: 60rpx;
}
.active {
	color: #3399cc;
	border-bottom: 1px solid #3399cc;
}
.center {
	margin-top: 85px;
}
.content-demo {
	float: left;
	height: 100%;
	background-color: #ffffff;

	margin-left: 5px;
	margin-right: 5px;
	width: 46%;
}
.dome-box {
	padding: 3px;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
.demo-img {
	width: 100%;
	border-radius: 4px;
}
.demo-img image {
	width: 100%;
	height: 140px;
	border-radius: 4px;
}
.demo-title {
	height: 24px;
	border-color: #ff0000;
	font-size: 35rpx;
	margin-top: 5px;
	color: #ff0000;
	font-weight: 700;
	overflow: hidden;
}
.demo-shop {
	color: #000000;
	margin-top: 5px;
	display: flex;
	justify-content: left;
	align-items: center;
}
.shop-sname {
	font-size: 22rpx;
}
.location {
	position: relative;
	left: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.location view {
	font-size: 25rpx;
	line-height: 20upx;
	// padding-top: 8px;
	font-weight: bold;
	vertical-align: middle;
}
</style>
